body {
	overflow: scroll;
}

#upload-image-container,
#result-contanier {
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#upload-image-container canvas,
#result-contanier canvas {
	width: 100%;
}

#tile-container {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* background: url(../img/2.jpg); */
	background-size: 100% 100%;
}

#bg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
}

#cvs-tiles {
	width: 100%;
	height: 100%;
	z-index: 10;
}

#tile-container div {
	border: solid 1px #000000;
	/*background: #ffffff;*/
	margin: 0;
	padding: 0;
	width: 33px;
	height: 33px;
	font-size: 15px;
	opacity: 0.5;
}

.btn {
	min-width: 50px;
	max-width: 300px;
	height: 30px;
	margin: 10px;
	text-align: center;
	line-height: 30px;
	background-color: gray;
	color: #ffffff;
	font-weight: 300;
	font-size: 10px;
}

#check {
	background-color: gray;
	color: #ffffff;
}

#print {
	background-color: red;
	color: #ffffff;
}

#type-container {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	left: 10px;
	width: 80vw;
	height: 100px;
	margin: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	z-index: 999;
}

#type-container div {
	width: 100px;
	height: 80px;
	border: 1px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
}


div.black {
	color: #ffffff;
	background-color: #000000;
}

div.wall {
	color: #FFFFFF;
	background-color: #808080;
}

div.floor {
	background-color: #FFCC66;
}

div.coin {
	background-color: #FFFF33;
}

div.item {
	background-color: #FF0033;
}

div.born {
	background-color: #00FF00;
}

div.exit {
	background-color: #0000FF;
}

#grid-setting-container {
	display: flex;
	justify-content: space-around;
	width: 300px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
}

#ipt-grids-perline {
	width: 200px;
	text-align: center;
}

#btn-grid-line-ok {
	width: 80px;
	background: #FFFFFF;
	color: #000000;
	text-align: center;
	border: solid 1px #000000;
}

#hint {
	position: fixed;
	right: 10px;
	top: 10px;
	width: 150px;
	height: 100px;
	border: solid 1px #000000;
}

#hint div,
#hint h5 {
	height: 50px;
	line-height: 50px;
	text-align: left;
	padding: 0;
	margin: 0;
}

#hint h5 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#hint div {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: solid 1px #000000
}

#map-transform {
	position: fixed;
	right: 10px;
	top: 150px;
	width: 150px;
	height: 100px;
	border: solid 1px #000000;

	text-align: center;
	background: #000000;
	color: #FFFFFF;
	line-height: 100px;
}

#map-transform a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#type-container div.hl {
	border: solid 5px red;
}

#tile-container div.transparent,
#hint div.transparent {
	background-color: #00ffffff;
}

#text-json-result {
	width: 1024px;
	height: 1024px;
}
